<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app" style="border: 1px solid red;padding: 10px;">
        <h1>新闻列表</h1>
        <!-- 引入子组件(无法识别) -->
         <news-item></news-item>
         <!-- 引入父组件 -->
          <news-list></news-list>
    </div>
    <!-- 父组件模版 -->
     <template id="news-list-template">
        <ul style="border: 1px solid blue;padding: 10px;">
            <!-- 在父组件中引入两个子组件 -->
             <news-item></news-item>
             <news-item></news-item>
        </ul>
     </template>
     <!-- 子组件模版 -->
      <template id="news-item-template">
        <li style="border: 1px solid green;padding: 10px;">
            新闻标题
        </li>
      </template>
      <script src="js/vue.js"></script>
      <script>
        //创建子组件
        const newsItem = {
            //引用子组件模版
            template:`#news-item-template`
        }

        //创建父组件
        const newsList = {
            //引用父组件模版
            template:`#news-list-template`,
            components:{
                //注册子组件
                'news-item':newsItem
            }
        };

        //创建Vue实例，并将父组件注册到Vue实例中
        const app = new Vue({
            el:'#app',
            components:{
                //注册父组件
                'news-list':newsList,
                'news-item':newsItem,
            }
        })
      </script>
</body>
</html>